<template>
	<div id="connection-id" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>设备中心</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/devicelist' }">设备管理</el-breadcrumb-item>
						<el-breadcrumb-item>连接记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<button class="same-search-btns" @click="returnBack">返回</button>
				</div>
			</div>
		</div>

		<div class="same-table-box">
			<h4 class="same-title-box">连接记录</h4>
			<div class="table_box">

				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						<el-table-column align="center" prop="id" width="120" label="ID">
						</el-table-column>

						<el-table-column align="center" prop="equipment_number" label="设备号">
						</el-table-column>

						<el-table-column align="center" prop="address" label="状态">
							<template slot-scope="scope">
								<el-tag size="mini" type="success" v-if="scope.row.is_online == 1">在线</el-tag>
								<el-tag size="mini" type="warning" v-else-if="scope.row.is_online == 0">离线</el-tag>
								<span v-else>--</span>
							</template>
						</el-table-column>


						<el-table-column align="center" prop="create_time" label="记录时间">
						</el-table-column>

						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>


					<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
							layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber"></el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { regionDataPlus } from 'element-china-area-data';
	export default {
		name: 'devicelist',
		data: function () {
			return {
				pageNo: 1,
				pageSize: 20,
				pageSizesList: [20, 30, 40, 50],
				tableData: [], // 返回的结果集合
				totalDataNumber: 0, // 数据的总数,-----
				time: '',
				stateoption: [
					{
						value: 0,
						label: '全部状态'
					},
					{
						value: 1,
						label: '在线'
					},
					{
						value: 2,
						label: '离线'
					}
				],
				state: this.$route.query.stat_es == 2 ? 2 : '',
				noticeoption: [
					{
						value: '1',
						label: '正常'
					},
					{
						value: '2',
						label: '低水位'
					},
					{
						value: '3',
						label: '高水位'
					},
					{
						value: '4',
						label: '低压力'
					},
					{
						value: '5',
						label: '高压力'
					}
				],
				notice: '',
				options: regionDataPlus,
				address: [],
				equipment_number: '',
				province: '',
				city: '',
				area: '',
				loading: true, //加载动画
				isLoad: false,//是否请求接口
				checkAll: false,
				checkedEq: [],
				userAgent: '',
				Province: [],
				City: [],
				Area: [],
				Village: [],
				province_id: '',
				city_id: '',
				area_id: '',
				village_id: '',
				village_name: ''
			};
		},
		// 初始化执行
		created: function () {
			this.getProvince();
			var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
			this.userAgent = userAgent;
			var that = this;
			if (locache.get('deviceListPage') != null) {
				that.pageNo = locache.get('deviceListPage');
			}
			if (locache.get('deviceListPageSize') != null) {
				that.pageSize = locache.get('deviceListPageSize');
			}
			var page = that.pageNo; // 当前页
			var pageSize = that.pageSize; // 每页条数
			that.equipment_number = this.$route.query.equipment_number; // 接收设备编号
			that.equipment(page, pageSize); // 获取设备列表数据
		},
		inject: [
			'reload'
		],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			searchVillage() { },
			chooseProvince(val) {
				console.log(val);
				this.getCity(val);
				this.city_id = '';
				this.area_id = '';
				this.village_name = '';
			},
			chooseArea(val) {
				this.getVillage(val);
				this.village_name = '';
			},
			//三级联动-省
			getProvince() {
				this.$post({
					url: 'Partner/Village/getEqProvince',
					data: {},
					success: data => {
						this.Province = data.data;
					}
				});
			}, //三级联动-市
			getCity(id) {
				this.$post({
					url: 'Partner/Village/getEqCity',
					data: {
						id: id
					},
					success: data => {
						this.City = data.data;
					}
				});
			}, //三级联动-区/县
			getArea(id) {
				this.$post({
					url: 'Partner/Village/getEqArea',
					data: {
						id: id
					},
					success: data => {
						this.Area = data.data;
					}
				});
			}, //园区列表
			getVillage(id) {
				this.$post({
					url: 'Partner/Village/getAllVillage',
					data: {
						province: this.province_id,
						city: this.city_id,
						area: this.area_id,
						village_name: ''
					},
					success: data => {
						this.Village = data.data;
					}
				});
			},
			handleChange(value) { },

			// 每页
			handleSizeChange(val) {
				var that = this;
				locache.set('deviceListPageSize', val);
				that.pageNo = 1;
				that.pageSize = val; // 当前每页显示条数
				that.equipment(that.pageNo, val); // 获取设备列表数据
			},
			// 分页
			handleCurrentChange(val) {
				var that = this;
				var pageSize = that.pageSize; // 每页条数
				that.pageNo = val;
				locache.set('deviceListPage', val);
				that.equipment(that.pageNo, pageSize); // 获取设备列表数据
			},
			// 获取设备列表数据
			equipment: function (page, pageSize) {
				this.loading = true; //打开loading动画
				this.isLoad = false;
				var that = this;
				// ajax请求
				that.$post({
					url: 'Partner/Equipment/connection',
					data: {
						page: page,
						pageSize: pageSize,
						equipment_number: that.equipment_number
					},
					success: data => {
						this.loading = false; //关闭动画
						this.isLoad = true;
						if (data.code == 1000) {
							that.tableData = []; // 清空数据
							$.each(data.data.connection, function () {
								this.checked = false;
								that.tableData.push(this);
							});
							that.totalDataNumber = Number(data.data.count); // 总的数据
						} else {
							that.tableData = []; // 清空数据
						}
					}
				});
			},
			// 搜索事件
			serach: function () {
				var that = this;
				that.equipment_number = that.equipment_number;
				that.state = that.state;
				that.notice = that.notice;
				that.province = that.address[0];
				that.city = that.address[1];
				that.area = that.address[2];
				that.village_name = that.village_name;
				that.pageNo = 1; // 当前页
				locache.set('deviceListPage', that.pageNo);
				that.equipment(that.pageNo, that.pageSize); // 获取设备列表数据
			},
		},
		mounted() { },
		watch: {}
	};
</script>

<style>
	#connection-id {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
	}
</style>